<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 告诉 Internet Explorer 使用最新的渲染引擎 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>it is me by bootstrap-v5</title>
    <!-- 定义网页的描述信息，有助于搜索引擎优化 -->
    <meta name="description" content="it is me by bootstrap-v5">
    <!-- 告诉搜索引擎收录该页面并跟随页面中的所有链接 -->
    <meta name="robots" content="all,follow">
    <!-- 引入 Google 字体，这里使用 Work Sans 字体，包含 300、400 和 800 三种字重 -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,800&amp;display=swap">
    <!-- 引入主题样式表，通过 id 可以方便后续动态切换样式 -->
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <!-- 引入自定义样式表，用于添加或覆盖默认样式 -->
    <link rel="stylesheet" href="css/custom.css">
    <!-- 设置网页的图标，会显示在浏览器标签页和书签栏 -->
    <link rel="shortcut icon" href="img/favicon.png">
</head>
<!-- body 使用v5的滚动监听 -->

<body class="scrollspy-example" data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="0" tabindex="0">
    <header class="header">
        <!-- 导航栏 -->
        <nav class="navbar navbar-light navbar-expand-lg fixed-top" id="navbar">
            <div class="container">
                <!-- 这是一个brand  是我个人的简单logo  -->
                <a href="index.html" class="navbar-brand logo">
                    <img src="img/logo.svg" alt="logo" width="45">
                </a>
                <!-- 此按钮用来 在小屏幕设备上展开与收缩导航栏 -->
                <button class="navbar-toggler navbar-toggler-end" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars"></i>
                </button>
                <!-- 导航栏内容 -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <!-- text-uppercase 用来将导航栏的链接转换为大写 -->
                            <a href="#hero" class="nav-link text-uppercase active">Home
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#about" class="nav-link text-uppercase">Abount</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-uppercase" href="#expertise">Expertise</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-uppercase" href="#education">Education</a>
                        </li>
                        <!-- 定义一个导航菜单项，点击后会跳转到联系页面 -->
                        <li class="nav-item">
                            <a class="nav-link text-uppercase" href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <!-- Hero section -->
    <section class="hero bg-cover bg-center py-5" id="hero" style="background-image: url(img/karina.png);">
        <div class="container py-5 my-5 z-index-20 position-relative">
            <!-- 布局网格系统 -->
            <div class="row py-lg-5 mt-5">
                <div class="col-md-8 text-white">
                    <h2 class="h4 text-primary mb-0">Hi there, I am</h2>
                    <h1 class="text-uppercase mb-0 text-xl">karina
                        <span class="text-primary">fan</span>
                    </h1>
                    <h2 class="h4 fw-normal mb-5">Front End Web Developer</h2>
                    <!-- 个人介绍 -->
                    <p class="text-shadow">
                        我来自家里蹲大学
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- About section -->
    <section id="about" class="py-5 bg-light">
        <div class="container py-5">
            <header class="mb-5">
                <!-- 包含小标题和大标题 -->
                <p class="fw-bold text-primary text-uppercase letter-spacing-3">
                    Innovative solutions
                </p>
                <h2 class="h3 lined">To boost your creative projects(我其实是个混吃等死的)</h2>
            </header>
            <!-- 定义一个段落，显示主要介绍信息，文字颜色为灰色 -->
            <p class="lead text-muted">上辈子作孽,这辈子学计算机 <strong class="text-dark">活该 后悔</strong> </p>
            <!-- 定义一个段落，显示补充介绍信息，文字颜色为灰色 -->
            <p class="text-muted"><mark>emmmm...</mark>还没想好写什么</p>
            <!-- 定义一个段落，显示结尾介绍信息，文字颜色为灰色 -->
            <p class="text-muted mb-0">我也不会写代码，但我会想明天抖音看什么美女</p>
        </div>
    </section>
    <!-- Expertise section -->
    <section class="bg-light py-5" id="expertise">
        <div class="container py-5">
            <header class="mb-5 pb-4">
                <!-- 包含小标题和大标题 -->
                <p class="fw-bold text-primary text-uppercase letter-spacing-3">
                    Expertise
                </p>
                <h2 class="h3 lined">My skills and abilities</h2>
            </header>
            <!-- 行内元素的垂直间距为5 -->
            <div class="row gy-5">
                <div class="col-md-6">
                    <h3 class="h4">
                        <span class="text-primary me-2">01</span>Ecommerce
                    </h3>
                    <p class="text-muted text-sm ps-3">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus
                        tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
                    </p>

                </div>
                <div class="col-md-6">
                    <h3 class="h4">
                        <span class="text-primary me-2">02</span>Web Design
                    </h3>
                    <p class="text-muted text-sm ps-3">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus
                        tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
                    </p>
                </div>
                <div class="col-md-6">
                    <h3 class="h4">
                        <span class="text-primary me-2">03</span>Graphic Design
                    </h3>
                    <p class="text-muted text-sm ps-3">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus
                        tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
                    </p>
                </div>
                <div class="col-md-6">
                    <h3 class="h4">
                        <span class="text-primary me-2">04</span>吹牛逼
                    </h3>
                    <p class="text-muted text-sm ps-3">
                        以上都是我吹牛逼的 信不信由你
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Education section -->
    <section class="bg-light py-5" id="education">
        <div class="container py-5">
            <header class="mb-5 pb-4">
                <!-- 包含小标题和大标题 -->
                <p class="fw-bold text-primary text-uppercase letter-spacing-3">
                    Lazy isn't in my vocabulary.
                </p>
                <h2 class="h3 lined">My education and training</h2>
            </header>
            <!-- 定义一个时间线 使用无序列表实现 -->
            <!-- Timeline -->
            <ul class="timeline">
                <li class="timeline-item ms-3 pb-4">
                    <div class="timeline-arrow">
                        <div class="row gx-0 gy-4">
                            <div class="col-lg-5">
                                <p class="fw-bold text-primary text-sm mb-2">
                                    2023-2027
                                </p>
                                <h2 class="h5 mb-0">天坑专业---计算机科学与技术</h2>
                                <p class="mb-0 text-sm">
                                    江西财经大学现代经济管理学院
                                </p>
                                <span class="small text-muted">china</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="timeline-item ms-3 pb-4">
                    <div class="timeline-arrow">
                        <div class="row gx-0 gy-4">
                            <div class="col-lg-5">
                                <p class="fw-bold text-primary text-sm mb-2">
                                    2021-2023
                                </p>
                                <h2 class="h5 mb-0">母猪产后护理</h2>
                                <p class="mb-0 text-sm">
                                    江西母猪饲养中心
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="timeline-item ms-3 pb-4">
                    <div class="timeline-arrow">
                        <div class="row gx-0 gy-4">
                            <div class="col-lg-5">
                                <p class="fw-bold text-primary text-sm mb-2">
                                    2017-2021
                                </p>
                                <h2 class="h5 mb-0">母鸡产后护理</h2>
                                <p class="mb-0 text-sm">
                                    共青城
                                </p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <!-- Contact section -->
    <section class="bg-light py-5" id="contact">
        <div class="container py-5">
            <header class="mb-5 pb-4">
                <!-- 包含小标题和大标题 -->
                <p class="fw-bold text-primary text-uppercase letter-spacing-3">
                    Contact me
                </p>
                <h2 class="h3 lined">Get in touch</h2>
            </header>
            <div class="row gy-4">
                <div class="col-md-6 col-lg-3">
                    <a href="#!" class="px-4 py-5 text-center contact-item shadow-sm reset-anchor d-block">
                        <i class="fas fa-map-marked-alt fa-2x mb-4"></i>

                        <h4 class="contact-item-title h5 text-uppercase">Location</h4>
                        <p class="text-sm mb-0">尚信B538</p>
                    </a>
                </div>
                <div class="col-md-6 col-lg-3">
                    <a href="tel:15697822760" class="px-4 py-5 text-center contact-item shadow-sm reset-anchor d-block">
                        <i class="fas  fa-2x mb-4"></i>
                        <h4 class="contact-item-title h5 text-uppercase">Phone</h4>
                        <p class="text-sm mb-0">15697822760</p>
                    </a>
                </div>
                <div class="col-lg-3 col-md-6">
                    <!-- 定义一个链接，点击后跳转到网站，此处链接格式有误，应添加 http:// 或 https:// -->
                    <a class="px-4 py-5 text-center contact-item shadow-sm reset-anchor d-block" href="www.example.com">
                        <!-- 显示一个地图标记图标 -->
                        <i class="fas fa-map-marker-alt fa-2x mb-4"></i>
                        <!-- 定义一个四级标题，显示信息标题，文字为大写 -->
                        <h4 class="contact-item-title h5 text-uppercase">Website</h4>
                        <!-- 定义一个段落，显示网站地址，字体较小 -->
                        <p class="text-sm mb-0">www.example.com</p>
                    </a>
                </div>
                <div class="col-lg-3 col-md-6">
                    <!-- 定义一个链接，点击后打开邮件客户端并填写收件人地址 -->
                    <a class="px-4 py-5 text-center contact-item shadow-sm reset-anchor d-block"
                        href="mailto:info@example.com">
                        <!-- 显示一个地图标记图标 -->
                        <i class="fas fa-map-marker-alt fa-2x mb-4"></i>
                        <!-- 定义一个四级标题，显示信息标题，文字为大写 -->
                        <h4 class="contact-item-title h5 text-uppercase">Email</h4>
                        <!-- 定义一个段落，显示邮箱地址，字体较小 -->
                        <p class="text-sm mb-0">info@example.com</p>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <footer>

        页脚不做了 我也没有什么社交账号 ins youtube账号 国内打不开
    </footer>
    <!-- 引入 Bootstrap 5 的 JavaScript 库，包含所有组件的交互功能 -->
    <!-- JavaScript files-->
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义的 JavaScript 文件，用于实现网页的自定义交互功能 -->
    <script src="js/front.js"></script>
    <!-- 引入 FontAwesome 图标库的 CSS 文件，放在最后加载以避免阻塞页面渲染 -->
    <!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</body>

</html>